<template>
  <div v-if="dialogVisible" class="dialogBox">
    <div class="dialogBox-title">
      <div class="icon">
        <div class="icon-1">1</div>
        <span>考核信息</span>
      </div>
      <div style="width: 250px; height: 1; border-top: 1px solid black"></div>
      <div class="icon">
        <div class="icon-2">2</div>
        <span style="color: rgb(167, 167, 167)">计算结果</span>
      </div>
      <img @click="closeDialog" src="@/assets/images/modelExam/close.png" alt="" />
    </div>
    <div class="inner-box">
      <div class="test-msg">
        <div class="title">基本信息</div>
        <el-form :model="formInline" class="demo-form-inline">
          <el-form-item label="记录名称：">
            <el-input v-model="formInline.user" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="河系计算方案：">
            <el-select v-model="formInline.region" placeholder="请选择">
              <el-option label="河系方案1" value="1" />
              <el-option label="河系方案2" value="2" />
            </el-select>
          </el-form-item>
        </el-form>
        <div style="color: rgb(167, 167, 167)">参与河系计算方案的单站方案信息</div>
        <div class="table-box">
          <el-table border :data="tableData" style="width: 100%; margin-top: 20px"
            :header-cell-style="{ background: '#FAFAFA' }">
            <el-table-column prop="sectionName" label="控制断面名称" />
            <el-table-column prop="siteType" label="站点类型" />
            <el-table-column prop="siteNode" label="站点编码" />
            <el-table-column prop="unitName" label="单元方案名称" />
            <el-table-column prop="address" label="操作">
              <template #default>
                <el-button link type="primary" size="small">定位</el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagi-nation :pageSize="page.pageSize" :pageTotal="page.total" @pageFunc="pageFunc" class="page">
          </pagi-nation>
        </div>

      </div>
      <div class="rain">
        <div class="title">降雨场次信息</div>
        <el-form :model="formInline1" class="demo-form-inline">
          <el-form-item label="预报时间">
            <el-date-picker :locale="locale" v-model="formInline1.value1" type="datetime" placeholder="选择日期" />
          </el-form-item>
          <el-form-item label="预热期：">
            <el-input v-model="formInline.user" placeholder="请输入" class="shortInput" />天
            <div style="margin-left: 20px">开始时间：<i>2021-10-16 12:00 </i></div>
          </el-form-item>
          <el-form-item label="预见期：">
            <el-input v-model="formInline.user" placeholder="请输入" class="shortInput" />小时
            <div style="margin-left: 20px">开始时间：<i>2021-10-16 12:00 </i></div>
          </el-form-item>
        </el-form>
        <div class="btn">
          <el-button type="primary">添加</el-button>
        </div>
        <div class="table-box">
          <el-table :data="countTableData" style="width: 100%; margin-top: 10px">
            <el-table-column prop="playName" label="场次名称" show-overflow-tooltip />
            <el-table-column prop="sportTime" label="预报时间" show-overflow-tooltip />
            <el-table-column prop="day" label="预热期-天" show-overflow-tooltip />
            <el-table-column prop="hours" label="预见期-小时" class-name="colunmWidth" />
            <el-table-column prop="computTime" label="计算开始/结束时间" class-name="colunmWidth" show-overflow-tooltip />
            <el-table-column prop="address" label="操作" class-name="colunmWidth">
              <template #default>
                <el-button link type="primary" size="small">修改</el-button>
                <el-button link type="primary" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagi-nation :pageSize="page.pageSize" :pageTotal="page.total" @pageFunc="pageFunc" class="page">
          </pagi-nation>
        </div>

      </div>
      <div class="btn-group">
        <el-button type="primary" @click="getRes">开始计算</el-button>
        <el-button type="info" @click="closeDialog">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import pagiNation from '@/components/app-pagination/pagination.vue'

const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false
  }
})
const formInline = reactive({
  user: '',
  region: ''
})
const formInline1 = reactive({
  value1: '',
  region: ''
})
let navId = ref(1)
let page = reactive({
  pageNum: 1, //当前页
  pageSize: 10, //每页条目数
  total: 100 // 记录总数
})

const pageFunc = (data) => {
  page.pageSize = data.pageSize
  page.pageNum = data.pageNum
  //initialization() // 触发获取数据函数
}
const emit = defineEmits(['closeDialog', 'getRes'])
const closeDialog = () => {
  emit('closeDialog', false)
}
const getRes = () => {
  emit('getRes', true)
}
const tableData = [
  { sectionName: '莱芜', siteType: '水库', siteNode: '001', unitName: '新安江+1维' },
  { sectionName: '杨家横', siteType: '水库', siteNode: '001', unitName: '新安江+1维' }
]
const countTableData = [
  {
    playName: '20211019-20211130',
    sportTime: '2021-10-19 12:00',
    day: '7',
    hours: '12',
    computTime: '20211019-20211130'
  },
  {
    playName: '20211019-20211130',
    sportTime: '2021-10-19 12:00',
    day: '7',
    hours: '12',
    computTime: '20211019-20211130'
  },
  {
    playName: '20211019-20211130',
    sportTime: '2021-10-19 12:00',
    day: '7',
    hours: '12',
    computTime: '20211019-20211130'
  },
  {
    playName: '20211019-20211130',
    sportTime: '2021-10-19 12:00',
    day: '7',
    hours: '12',
    computTime: '20211019-20211130'
  }
]
</script>

<style lang="less" scoped>
.dialogBox {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .dialogBox-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    border-bottom: 1px solid rgb(167, 167, 167);

    img {
      width: 20px;
      height: 20px;
      cursor: pointer;
    }

    .icon {
      display: flex;
      align-items: center;

      span {
        margin-left: 20px;
      }

      .icon-1 {
        background-color: blue;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        color: #fff;
      }

      .icon-2 {
        background-color: #fff;
        border-radius: 50%;
        border: 1px solid black;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
      }
    }
  }
  .inner-box {
    width: 100%;
    height: calc(100% - 50px);
    overflow-y: auto;

    .test-msg {
      width: 100%;
      .el-form {
        display: flex;
        margin-left: 10px;
      }
      .el-form-item {
        margin-right: 10px;
      }
      // height: 320px;
      .table-box {
        background: white;
        :deep(.el-table) {
          height: 120px;
        }
        .page {
          display: flex;
          justify-content: flex-end;
          // margin: 20px 0;
          margin-top: 10px;
        }
      }

      .title {
        color: #409eff;
        margin: 10px 0;
      }

      .demo-form-inline {
        margin-left: 20px;
      }
    }

    .rain {
      width: 100%;
      height: calc(100% - 360px);
      margin-top: 10px;
      .el-form {
        margin-left: 10px;
      }
      .shortInput {
        width: 100px;
        margin-right: 10px;
      }
      // height: ;
      .table-box {
        height: calc(100% - 230px);
        background: white;
        :deep(.el-table) {
          height: calc(100% - 35px);
        }
        .page {
          display: flex;
          justify-content: flex-end;
          margin-top: 10px;
        }
      }

      .title {
        color: #409eff;
        margin: 10px 0;
      }

      .demo-form-inline {
        i {
          color: #409eff;
        }
      }

      .btn {
        display: flex;
        justify-content: flex-end;
        margin-right: 30px;
      }
    }

    .btn-group {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 50px;
    }
  }
}
</style>
